@import 'tailwindcss';

/* Define theme variables  */
@theme {
  /* font family */
  --font-sans:
    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: 'Times New Roman', 'Microsoft Yahei', '微软雅黑', ui-serif, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* add basic style */
@layer base {
  h1 {
    @apply text-lg font-bold;
  }

  h2,
  h3,
  h4,
  h5 {
    @apply text-base font-bold;
  }

  a {
    @apply hover:text-sky-500;
  }

  header {
    @apply w-full mx-auto bg-white;
  }

  /* logo */
  /* .header-logo {
        @apply w-128 mx-auto items-center;
    } */

  /* header menu */
  .header-menu {
    @apply p-1 font-semibold;
  }

  /* ul标签 */
  .header-menu-items {
    @apply flex flex-wrap justify-center items-center space-x-5 border-t border-b border-gray-500 px-4 py-1;
  }

  .header-menu-items li {
    @apply py-2;
  }

  .header-menu-items li:hover {
    @apply text-sky-500;
  }

  .header-menu-items .meun-item-active {
    @apply text-sky-500;
  }

  .header-menu-items .is-active {
    @apply text-sky-500;
  }

  /* 文章标题 */

  #featured-posts img {
    @apply h-full w-full object-cover object-center;
  }

  .article-content {
    @apply leading-8 text-base subpixel-antialiased;
  }

  .article-content h2 {
    @apply -m-4 my-2 border-l-4 border-b border-sky-500 bg-gray-50 px-4 py-2 font-bold;
  }

  .article-content h3 {
    @apply border-b border-gray-200 py-2 font-bold;
  }

  .article-content p {
    @apply my-4;
  }

  .article-content ul {
    @apply ml-8 list-disc;
  }

  .article-content ol {
    @apply ml-8 list-decimal;
  }

  .article-content table {
    @apply w-full mx-auto table-auto border-collapse border border-gray-400 align-middle;
  }

  .article-content table > thead > tr > th {
    @apply m-2 p-2 border border-gray-300 font-semibold text-center bg-gray-300;
  }

  .article-content table > tbody > tr > td {
    @apply m-2 p-2 border border-gray-300 text-left;
  }

  .article-content .list-icon {
    @apply flex items-start gap-3;
  }

  .article-content strong {
    @apply font-semibold text-sky-600;
  }

  .inlinecode {
    @apply bg-gray-50 dark:bg-violet-950/30 rounded-lg text-violet-600 dark:text-violet-400 font-semibold;
  }

  blockquote {
    @apply my-2 py-4 px-8 border-l-4 border-sky-600 rounded-lg bg-gray-50 dark:bg-blue-950/30 italic text-gray-700;
  }

  .callout-info {
    @apply bg-sky-50 dark:bg-blue-950/30 rounded-lg p-4 border-l-4 border-sky-600 hover:shadow-lg hover:shadow-sky-100/50 dark:hover:shadow-sky-900/20 transition-all duration-300;
  }

  .callout-warning {
    @apply bg-yellow-50 dark:bg-yellow-950/30 rounded-lg p-4 border-l-4 border-yellow-600 hover:shadow-lg hover:shadow-yellow-100/50 dark:hover:shadow-yellow-900/20 transition-all duration-300;
  }

  .callout-danger {
    @apply bg-red-50 dark:bg-red-950/30 rounded-lg p-4 border-l-4 border-red-600 hover:shadow-lg hover:shadow-red-100/50 dark:hover:shadow-red-900/20 transition-all duration-300;
  }

  .callout-success {
    @apply bg-green-50 dark:bg-green-950/30 rounded-lg p-4 border-l-4 border-green-600 hover:shadow-lg hover:shadow-green-100/50 dark:hover:shadow-green-900/20 transition-all duration-300;
  }

  /* 缩略图 */
  .thumbnail {
    @apply h-40 w-64;
  }

  .thumbnail img {
    @apply h-auto w-full rounded-sm object-cover object-center ease-in-out hover:scale-110;
  }

  /* 文章摘要 */

  .article-introtext {
    @apply my-4 p-2 font-light text-ellipsis leading-6 bg-gray-50 border border-gray-200 border-dotted overflow-hidden;
    /* display: -webkit-box;
        text-overflow: -o-ellipsis-lastline;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical; */
  }

  .index-article-introtext {
    @apply w-full mt-4 mb-8 py-2 text-ellipsis leading-6 text-left overflow-hidden;
    /* display: -webkit-box;          
        -webkit-line-clamp: 2;        
        line-clamp: 2;
        -webkit-box-orient: vertical; 
        overflow: hidden;              
        text-overflow: -o-ellipsis-lastline;        */
    /* for firefox */
    /* display: -moz-box;
        -moz-box-orient: vertical;
        -moz-line-clamp: 2; */
  }

  /* 文章标签 */
  .article-tags {
    @apply inline-flex items-center  pr-2 text-sm;
  }

  .article-tags a {
    @apply m-1 px-2 py-1 rounded-sm bg-gray-600  text-white opacity-80;
    filter: alpha(opacity=90);
  }

  .article-tags a:hover {
    @apply bg-sky-600;
    opacity: 1;
    filter: alpha(opacity=100);
  }

  .article-tags a:nth-child(5n) {
    @apply bg-violet-600;
  }

  .article-tags a:nth-child(5n - 1) {
    @apply bg-emerald-600;
  }

  .article-tags a:nth-child(5n - 2) {
    @apply bg-orange-600;
  }

  .article-tags a:nth-child(5n - 3) {
    @apply bg-blue-600;
  }

  /* 文章评论 */
  .comment-form {
    @apply grid grid-cols-1 space-y-2;
  }

  .comment-form .js-form-item-name {
    @apply inline-flex items-center my-1 py-1 text-gray-700;
  }

  .comment-form .js-form-item-mail {
    @apply inline-flex items-center my-1 py-1 text-gray-700;
  }

  .comment-form .js-form-item-homepge {
    @apply inline-flex items-center my-1 py-1 text-gray-700;
  }

  .comment-form .form-item label {
    @apply min-w-[4rem] text-left mr-2 text-sm font-medium text-gray-700;
  }

  .comment-form .form-item input {
    @apply rounded-sm mx-2 py-1 border border-gray-300 focus:outline-sky-400  text-sm;
  }

  .comment-form .form-type-email #edit-mail--description {
    @apply text-sm text-gray-500 italic;
  }

  .comment-form #edit-comment-body-0-format-help-about {
    @apply hidden;
  }

  .comment-form .form-type-textarea {
    @apply my-4 py-2;
  }

  .comment-form .button {
    @apply rounded-md border border-gray-300 bg-white px-8 py-1.5 text-center text-sm font-medium text-gray-700 transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400;
  }

  .comment-form .button--primary {
    @apply border-sky-500 bg-sky-500 text-white hover:border-sky-700 hover:bg-sky-700 focus:ring focus:ring-sky-200 disabled:cursor-not-allowed disabled:border-sky-300 disabled:bg-sky-300;
  }

  /* 文章列表分页 */
  .pagination__wrapper {
    @apply flex justify-center;
  }

  .pagination {
    @apply flex justify-center;
  }

  .pagination ul {
    @apply inline-flex items-center -space-x-px rounded-md text-sm shadow-sm;
  }

  .pagination ul > li {
    @apply inline;
  }

  .pagination ul > li > a {
    @apply inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:bg-gray-50;
  }
  .pagination ul > li > span {
    @apply inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-gray-700;
  }

  .pagination ul > li > a:focus,
  .pagination ul > li > a:hover {
    @apply bg-sky-500 text-white;
  }

  .pagination ul > .active > a,
  .pagination ul > .active > span {
    @apply bg-sky-500 text-white;
  }

  .pagination ul > .active > a,
  .pagination ul > .active > span {
    @apply cursor-default;
  }

  .pagination ul > .disabled > a,
  .pagination ul > .disabled > a:focus,
  .pagination ul > .disabled > a:hover,
  .pagination ul > .disabled > span,
  .pagination ul > li > span {
    @apply cursor-default bg-transparent text-gray-500;
  }

  .prev-page,
  .next-page {
    @apply rounded;
  }

  /* 侧边栏 */
  .aside-card {
    @apply clear-both mb-4 p-2 rounded-sm bg-white;
  }

  .aside-card h1 {
    @apply mb-2 pb-1 border-b-4 border-solid border-sky-500;
  }

  .aside-card ul {
    @apply py-2 list-decimal;
  }

  .aside-card li {
    @apply flex justify-between py-1 overflow-hidden whitespace-nowrap border-b border-dotted border-gray-400;
  }

  aside.ol.li {
    counter-reset: list-number 0;
  }

  aside.ol.li li:before {
    counter-increment: list-number;
    content: counter(list-number);

    @apply w-8 h-8 inline-flex mr-2.5 mb-2.5 items-center justify-center bg-sky-500 rounded-full text-gray-200;
  }

  /* footer */
  .footer-menu {
    @apply pr-2;
  }

  .footer-menu-items {
    @apply flex flex-wrap;
  }

  .footer-header-items li {
    @apply mr-8;
  }

  footer a:hover,
  .footer-menu-items li.current-menu-item,
  .footer-menu-items a:hover {
    @apply text-gray-300;
  }

  .footer-copyright {
    @apply flex flex-col items-center bg-gray-800 text-gray-200 overflow-hidden;
  }
}
